<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link href="jquery-mobile/jquery.mobile.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.raty.js"></script> 
<link href="css/bmap.css" rel="stylesheet" type="text/css"/>
<link href="css/bmap_autocomplete.css" rel="stylesheet" type="text/css"/>


<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script> 
<script type="text/javascript" src="js/baiduAPI.js"></script>  
<script type="text/javascript" src="js/InfoBox_min.js"></script>  
<script type="text/javascript" src="js/convertor.js"></script>  
<script type="text/javascript" src="js/BaiduLoc.js"></script> 

<script src="js/showShopByType.js" type="text/javascript"></script>

<script type="text/javascript" src="js/UcarV1.js"></script> 
 
<title>Ucar</title>

<script type="text/javascript">
	var map;
function repair(map) {
	$("#suspendBox").popup("close");
	ucar(map, 1, "","");
}

function gasoline(map) {
	$("#suspendBox").popup("close");
	ucar(map, 2, "","");
}

function park(map) {
	$("#suspendBox").popup("close");
	ucar(map, 3, "","");
}

function collect(){
	$("#suspendBox").popup("close");
	readfile1(1);
	//readfile("您必须先登录，才能使用收藏功能");
}

function settings(){
	$("#infobox").popup("close");
	self.location = "login.html";	
}

if(DEBUG) {
	$(document).ready(function(){
	  //checkConnection();
	  init_index();
  });
} else {
  document.addEventListener("deviceready", onDeviceReady, false);
  function onDeviceReady()
  {
  	navigator.splashscreen.hide()
    checkConnection();
		init_index();
  }
}

    
function init_index() {
	   var lng = request("lng");
		 var lat = request("lat");
		 
     map = new BMap.Map("container",{enableHighResolution:true});
     
     if (lng != "" && lat != "") {
		    var newpoint = new BMap.Point(parseFloat(lng),parseFloat(lat));
		    map.centerAndZoom(newpoint, 15);
		 } else {
		 	  map.centerAndZoom("上海", 15);
		 	  //getGPS();
		 }
     
     map.enablePinchToZoom();
$("#container").css("height", document.body.clientHeight - $("#container").offset().top - $("#footer").height());

   	 tilesTime = 1;
	 map.addEventListener("tilesloaded", function(){ 	
	  if (tilesTime == 1) {
		 var type = request("type");
			
     if(type.indexOf("1") != -1){
         //改变标题
         $("#title  .ui-btn-text").html("保养与维修");
         ucar(map, 1, lng, lat);
     }
     else if(type.indexOf("2") != -1){
         //改变标题
         $("#title  .ui-btn-text").html("加油站");
         ucar(map, 2, lng, lat);
     }
     else if(type.indexOf("3") != -1){
         //改变标题
         $("#title  .ui-btn-text").html("停车场");
         ucar(map, 3, lng, lat);
     } else {
     	  getGPS();
     		$("#suspendBox").popup("open");
     }
    }
    tilesTime += 1;
	 });
	 	  
     
     
     
     $("#refreshCancel").click(function(){
   	 	  $("#refreshBox").popup("close");	
   	 });
   	 
   	 $("#search").keydown(function(){
   	 	if ($("#title  .ui-btn-text").html() == "保养与维修") {              
      	enterSearch(map, 1);	
    	} else if($("#title  .ui-btn-text").html() == "加油站") {
    		enterSearch(map, 2);	
    	} else if($("#title  .ui-btn-text").html() == "停车场") {
    		enterSearch(map, 3);	
    	} else {
    		alert("wrong opertation");	
    	}
   	 });
    

readfile1(0);

}

function readfile1(flag) {
	document.addEventListener("deviceready", onDeviceReady, false);
    // PhoneGap is ready
    function onDeviceReady() {
				//checkConnection();
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
    }

    function gotFS(fileSystem) {
        fileSystem.root.getFile("ucar/DataFile.txt", {create: true}, gotFileEntry, fail);
    }

    function gotFileEntry(fileEntry) {
        fileEntry.file(gotFile, fail);
    }

    function gotFile(file){
        readAsText(file);
    }

    function readAsText(file) {
        var reader = new FileReader();
        reader.onloadend = function(evt) {
			  var arg=evt.target.result.split(";");
			
			
            if (arg==""){
                $("#logbox").show();
            }else{
                //Read Loginfile
                var arg1=arg[0].split("=");
				var arg2=arg[1].split("=");
				var arg3=arg[2].split("=");
				var arg4=arg[3].split("=");
            
				var uid=arg1[1];			
        		var nickname=arg3[1];
				var image=arg4[1];
        if(!flag){
					  $("#nickname").html(nickname);
         		$("#userStatus").css("display", "none");
         		$("#currentUser").attr("src",image);
				}else{
				    self.location = "collect.html?uid="+uid;
				}
			}
		};
       reader.readAsText(file);	
    }

    function fail(evt) {
				$("#logbox").show();
				console.log("Detect as NOT logined.");
        console.log(evt.target.error.code);
    }
}	
     
//自动联想
var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
    {"input" : "search"
    ,"location" : "上海市"
});

var searchValue;
ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
	  var _value = e.item.value;
    searchValue = _value.province +  _value.city +  _value.district +  _value.street + _value.business;
    if (_value.province !="上海市" && _value.city!="上海市" && _value.province!="")
        alert("超出上海");  
    if ($("#title  .ui-btn-text").html() == "保养与维修") {              
      SearchShopPlace(map,searchValue,1);
    } else if($("#title  .ui-btn-text").html() == "加油站") {
    	SearchShopPlace(map,searchValue,2);
    } else {
    	SearchShopPlace(map,searchValue,3);
    }
    $("#search").blur();
});

    
    function checkConnection()
    {
        var networkState = navigator.network.connection.type;
        if (networkState == Connection.NONE || networkState == Connection.UNKNOWN)
            alert ("UCAR需要使用网络来加载数据.请确认您已经打开网络.");
         else
		 				console.log("Normal Network Connection.");
            //alert ("联网了"); 
    }
    
</script>

<style type="text/css">
.box {
	background-color: #222;
	/*opacity: 0.95;*/
	border-radius: 15px;
	border-style: solid;
	border-color: white;
	border-width: 1px;
}

.left {
	float: left;
	padding: 10px;
	cursor: pointer;
}

.clear {
	clear: both;
}

.label {
	color: white;
	font-size: 16px;
	padding: 2px;
	font-family:"Courier New", Courier, monospace;
}

.center {
	text-align:center;
}

/* 
   high dpi
*/
div#suspendBox .icon {
	height: 114px;
	width: 114px;
}

/* 
   high dpi
*/
#title .ui-btn-text{
   font-size:20px;
}

div#shopbox .label {
	font-weight: bold;
	font-size: 14px;
}

/*信息框
*/
div#shopbox {
	background: url("img/infobox.png") no-repeat;
	width: 220px;
	height: 59px;
	padding-left: 5px;
}

td#wrap {
	width: 190px;
}

img#logo {
	 position: absolute;
	 width: 70px;
	 height: 60px;
	 margin-top: 13px;
	 margin-left: 13px;
}

#refreshCancel {
	width: 80px;
	height: 30px;
	background-color: #444;
	color: white;
	margin-left: 25px;
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
	padding: 8px 10px;
	margin-right: 10px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
	font-size: 12pt;
}
/*
div#header {
	 height: 50px;
}*/
</style>

</head>
	
<body >

<div data-role="page" id="main_menu">
    <div data-role="header" id="header" data-theme="b">
    	  <img src="img/LOGO.png" id="logo">
        <h1>
        	  <a href="#suspendBox"  data-rel="popup" data-role="button" data-position-to="window" id="title" data-transition="slidedown">首页</a>
        </h1>
		
		<!-- 首页悬浮框内容 -->
		<div id="suspendBox" data-role="popup" data-theme="none" class="ui-content box">
         <div>
           <div id='repair' class='left' onclick='repair(map)'><img src='img/repair.png' class='icon'><div class='label center'>保养维修</div></div>
           <div id='gasoline' class='left' onclick='gasoline(map)'><img src='img/gasoline.png' class='icon' ><div class='label center'>加油站</div></div>
	         <div id='park' class='left' onclick='park(map)'><img src='img/park.png' class='icon'><div class='label center'>停车场</div></div>
	         <div id='collect' class='left' onclick='collect()'><img src='img/collect.png' class='icon'><div class='label center'>我的收藏</div></div>
	         <div id='setting' class='left' onclick='settings()'><img src='img/settings.png' class='icon'><div class='label center'>设置</div></div>
	         <div class='clear'></div>
         </div>
         <div style="float: right">
             <div style="float: right"><img id="currentUser" src='img/unlogin.png' class='icon'></div>
             <div style="float: right; margin-top: 20px; margin-right: 10px;">
               <div class='label' style="font-size: 16px;"><b id="nickname">未登录</b></div>
               <div class='label' style="font-size: 10px; float:right; cursor: pointer;" id="userStatus" onclick="window.location.href='login.html'">点击登录</div>
             </div>
         </div>
         <div class='clear'></div>
		</div>
	</div>
	
	<!-- 刷新提示框内容 -->
	<div id="refreshBox" data-role="popup" data-theme="none" class="ui-content box" style="width: 100px; height: 100px;">
		 <div class='label center'>正在努力刷新，请等待...</div>
		 <br><br>
		 <a style="color: white" id="refreshCancel">取消</a>
	</div>
    
    <!-- 地图区域 -->
        <div id="searchBox" style="display:none">
    	     <input type="search"  placeholder="输入地址" id="search"></input>
        </div>
        <div id="container">
         
        </div>
        
     <div data-role="footer" id="footer">
     	<h5>
        <font style="color: white;"><b id="current"></b></font>
        </h5>
     </div>
    
</div>

</body>
</html>
